<template>
  <div>
    <Card class="box">
      <Input
        v-model="postingName"
        placeholder="请输入标题"
        style="float: left; width: 300px"
        maxlength="50"
        show-word-limit
      />
      <Select v-model="boardId" style="width: 200px" placeholder="请选择版块">
        <Option
          v-for="item in boardList"
          :value="item.boardId"
          :key="item.boardId"
          >{{ item.boardName }}</Option
        >
      </Select>
      <br />
      <Divider />
      <Input
        v-model="firstContent"
        placeholder="请输入内容(无法插入图片)"
        style="float: left; width: 550px"
        type="textarea"
        :rows="10"
      />
    </Card>
    <div style="margin-top: 2em">
      <Button @click="sumbit" type="info">提交</Button>
      <Button @click="reset">重置</Button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PostingEdit',
  data () {
    return {
      postingName: '',
      firstContent: '',
      boardList: '',
      boardId: ''
      // msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    var _this = this // 临时变量
    this.$axios({
      method: 'post',
      url: '/login/success'
    }).then(function (response) {
      console.log(response)
      if (!response.data.result) {
        _this.$Message.error('请先登录!')
        _this.$router.push('/loginAuth')
        return
      }
      _this.$axios({
        method: 'get',
        url: '/selectBoard'
      }).then(function (response) {
        console.log(response)
        _this.boardList = response.data.result
      })
      console.log(response.data.result)
    })
  },
  methods: {
    reset: function () {
      this.firstContent = ''
      this.postingName = ''
    },
    sumbit: function () {
      var _this = this
      if (this.postingName.trim() !== '' && this.firstContent.trim() !== '' && this.boardId !== '') {
        this.$axios({
          method: 'post',
          url: '/createPosting',
          data: {
            postingName: this.postingName,
            authorId: this.$CommonVar.UserInformation.userId,
            firstContent: this.firstContent,
            boardId: this.boardId
          }
        }).then(function (response) {
          if (response.data.code === 1) {
            console.log(response)
            _this.$Message.info('创建成功!')
            _this.$router.push('/Posting/' + response.data.result)
          }
        })
      } else {
        this.$Message.error('请输入内容或选择版块!')
      }
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  margin: 0 auto;
  margin-top: 2%;
  width: 600px;
  height: 400px;
}
</style>
